<template>
  <div class="statistics-demo">
    <div class="example-section">
      <h3 class="section-title">基础统计卡片</h3>
      <p class="section-description">展示关键业务指标的统计卡片组件</p>

      <div class="statistics-grid">
        <div class="stat-card stat-card--primary">
          <div class="stat-icon">
            <user-outlined />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ formatNumber(12580) }}</div>
            <div class="stat-label">总用户数</div>
            <div class="stat-trend stat-trend--up">
              <arrow-up-outlined />
              <span>+12.5%</span>
            </div>
          </div>
        </div>

        <div class="stat-card stat-card--success">
          <div class="stat-icon">
            <transaction-outlined />
          </div>
          <div class="stat-content">
            <div class="stat-value">¥{{ formatNumber(2580000) }}</div>
            <div class="stat-label">今日交易额</div>
            <div class="stat-trend stat-trend--up">
              <arrow-up-outlined />
              <span>+8.2%</span>
            </div>
          </div>
        </div>

        <div class="stat-card stat-card--warning">
          <div class="stat-icon">
            <shop-outlined />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ formatNumber(1580) }}</div>
            <div class="stat-label">活跃商户</div>
            <div class="stat-trend stat-trend--down">
              <arrow-down-outlined />
              <span>-2.1%</span>
            </div>
          </div>
        </div>

        <div class="stat-card stat-card--info">
          <div class="stat-icon">
            <file-text-outlined />
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ formatNumber(8960) }}</div>
            <div class="stat-label">今日订单</div>
            <div class="stat-trend stat-trend--up">
              <arrow-up-outlined />
              <span>+15.8%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">详细统计卡片</h3>
      <p class="section-description">包含更多详细信息和图表的统计卡片</p>

      <div class="detailed-stats">
        <div class="detailed-card">
          <div class="card-header">
            <div class="card-title">
              <h4>收入概览</h4>
              <span class="card-period">本月</span>
            </div>
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1">本周</a-menu-item>
                  <a-menu-item key="2">本月</a-menu-item>
                  <a-menu-item key="3">本季度</a-menu-item>
                </a-menu>
              </template>
              <more-outlined class="card-action" />
            </a-dropdown>
          </div>
          <div class="card-body">
            <div class="main-metric">
              <span class="metric-value">¥{{ formatNumber(1580000) }}</span>
              <span class="metric-change metric-change--positive">+18.2%</span>
            </div>
            <div class="sub-metrics">
              <div class="sub-metric">
                <span class="sub-label">目标完成率</span>
                <span class="sub-value">78.5%</span>
              </div>
              <div class="sub-metric">
                <span class="sub-label">同比增长</span>
                <span class="sub-value">+12.8%</span>
              </div>
            </div>
            <div class="progress-bar">
              <a-progress :percent="78.5" :show-info="false" stroke-color="#52c41a" />
            </div>
          </div>
        </div>

        <div class="detailed-card">
          <div class="card-header">
            <div class="card-title">
              <h4>用户增长</h4>
              <span class="card-period">近7天</span>
            </div>
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1">近7天</a-menu-item>
                  <a-menu-item key="2">近30天</a-menu-item>
                  <a-menu-item key="3">近90天</a-menu-item>
                </a-menu>
              </template>
              <more-outlined class="card-action" />
            </a-dropdown>
          </div>
          <div class="card-body">
            <div class="main-metric">
              <span class="metric-value">{{ formatNumber(2580) }}</span>
              <span class="metric-change metric-change--positive">+25.6%</span>
            </div>
            <div class="metric-list">
              <div class="metric-item">
                <span class="metric-dot metric-dot--new"></span>
                <span class="metric-text">新增用户: {{ formatNumber(580) }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-dot metric-dot--active"></span>
                <span class="metric-text">活跃用户: {{ formatNumber(2000) }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-dot metric-dot--retention"></span>
                <span class="metric-text">留存率: 85.2%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">统计卡片组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="基础统计卡片代码">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="stat-card stat-card--primary"&gt;
    &lt;div class="stat-icon"&gt;
      &lt;user-outlined /&gt;
    &lt;/div&gt;
    &lt;div class="stat-content"&gt;
      &lt;div class="stat-value"&gt;12,580&lt;/div&gt;
      &lt;div class="stat-label"&gt;总用户数&lt;/div&gt;
      &lt;div class="stat-trend stat-trend--up"&gt;
        &lt;arrow-up-outlined /&gt;
        &lt;span&gt;+12.5%&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="详细统计卡片代码">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;div class="detailed-card"&gt;
    &lt;div class="card-header"&gt;
      &lt;div class="card-title"&gt;
        &lt;h4&gt;收入概览&lt;/h4&gt;
        &lt;span class="card-period"&gt;本月&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card-body"&gt;
      &lt;div class="main-metric"&gt;
        &lt;span class="metric-value"&gt;¥1,580,000&lt;/span&gt;
        &lt;span class="metric-change metric-change--positive"&gt;+18.2%&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  TransactionOutlined,
  ShopOutlined,
  FileTextOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  MoreOutlined
} from '@ant-design/icons-vue'

// 格式化数字
const formatNumber = (num: number): string => {
  return num.toLocaleString('zh-CN')
}
</script>

<style scoped>
.statistics-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 48px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

/* 基础统计卡片 */
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-card--primary .stat-icon {
  background: linear-gradient(135deg, #1890ff, #36cfc9);
}

.stat-card--success .stat-icon {
  background: linear-gradient(135deg, #52c41a, #73d13d);
}

.stat-card--warning .stat-icon {
  background: linear-gradient(135deg, #faad14, #ffc53d);
}

.stat-card--info .stat-icon {
  background: linear-gradient(135deg, #722ed1, #9254de);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #262626;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 8px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.stat-trend--up {
  color: #52c41a;
}

.stat-trend--down {
  color: #ff4d4f;
}

/* 详细统计卡片 */
.detailed-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.detailed-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.card-title h4 {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 4px 0;
}

.card-period {
  font-size: 12px;
  color: #8c8c8c;
}

.card-action {
  font-size: 16px;
  color: #bfbfbf;
  cursor: pointer;
  transition: color 0.3s ease;
}

.card-action:hover {
  color: #1890ff;
}

.main-metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  color: #262626;
}

.metric-change {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

.metric-change--positive {
  color: #52c41a;
  background: #f6ffed;
}

.sub-metrics {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.sub-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-label {
  font-size: 12px;
  color: #8c8c8c;
}

.sub-value {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.progress-bar {
  margin-top: 16px;
}

.metric-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.metric-dot--new {
  background: #1890ff;
}

.metric-dot--active {
  background: #52c41a;
}

.metric-dot--retention {
  background: #faad14;
}

.metric-text {
  font-size: 14px;
  color: #595959;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .statistics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detailed-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stat-card {
    padding: 20px;
  }

  .detailed-card {
    padding: 20px;
  }

  .sub-metrics {
    flex-direction: column;
    gap: 12px;
  }
}
</style>